<div class="footer">
  <div class="container py-4">
    <div class="row">
      <div class="col-md-6">
        <p class="mb-2 copyright-text" style="color: #8E8E93 !important;">© 2025 CarbonTrack碳账户. All rights reserved.</p>
      </div>
      <div class="col-md-6 text-md-right">
        <ul class="list-inline mb-0">
          <li class="list-inline-item"><a href="#" class="footer-link">Privacy Policy</a></li>
          <li class="list-inline-item"><a href="#" class="footer-link">Terms of Service</a></li>
          <li class="list-inline-item"><a href="#" class="footer-link">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
  .footer {
    background-color: #F2F2F7; /* iOS 灰色背景 - 浅色模式 */
    color: #8E8E93; /* iOS 辅助灰色文本 - 浅色模式 */
    padding: 20px 0;
    font-size: 14px;
    margin-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  
  /* 版权文本专用样式 */
  .copyright-text {
    color: #8E8E93; /* iOS 辅助灰色文本 - 浅色模式 */
    font-weight: 400;
    transition: color 0.3s ease;
  }
  
  /* 黑夜模式适配 - 通过父元素类名 */
  body.dark-theme .footer,
  body.auto-theme.dark-mode .footer {
    background-color: #1C1C1E; /* iOS 深色背景 - 暗色模式 */
    color: #98989D; /* iOS 辅助灰色文本 - 暗色模式 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* 版权文本黑夜模式样式 */
  body.dark-theme .copyright-text,
  body.auto-theme.dark-mode .copyright-text {
    color: #98989D !important; /* iOS 辅助灰色文本 - 暗色模式 */
  }
  
  /* 明确设置footer中所有文本元素的颜色 */
  body.dark-theme .footer p,
  body.auto-theme.dark-mode .footer p,
  body.dark-theme .footer span,
  body.auto-theme.dark-mode .footer span,
  body.dark-theme .footer div,
  body.auto-theme.dark-mode .footer div {
    color: #98989D !important; /* iOS 辅助灰色文本 - 暗色模式 */
  }
  
  /* 使用媒体查询自动检测系统颜色方案 */
  @media (prefers-color-scheme: dark) {
    /* 当系统为暗色模式且父元素没有明确指定主题时应用 */
    body:not(.light-theme) .footer:not(.footer-light) {
      background-color: #1C1C1E !important; /* iOS 深色背景 - 暗色模式 */
      color: #98989D !important; /* iOS 辅助灰色文本 - 暗色模式 */
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    body:not(.light-theme) .footer:not(.footer-light) p,
    body:not(.light-theme) .footer:not(.footer-light) span,
    body:not(.light-theme) .footer:not(.footer-light) div {
      color: #98989D !important; /* iOS 辅助灰色文本 - 暗色模式 */
    }
    
    body:not(.light-theme) .footer:not(.footer-light) .footer-link:not(:hover) {
      color: #AEAEB2 !important; /* iOS 文本颜色 - 暗色模式 */
    }
    
    body:not(.light-theme) .footer:not(.footer-light) .footer-link:hover {
      color: #0A84FF !important; /* iOS 蓝色 - 暗色模式 */
    }
  }
  
  /* 由JavaScript添加的自动黑暗模式类 */
  .footer.footer-auto-dark {
    background-color: #1C1C1E !important; /* iOS 深色背景 - 暗色模式 */
    color: #98989D !important; /* iOS 辅助灰色文本 - 暗色模式 */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* 明确设置auto-dark模式下所有文本元素的颜色 */
  .footer.footer-auto-dark p,
  .footer.footer-auto-dark span,
  .footer.footer-auto-dark div {
    color: #98989D !important; /* iOS 辅助灰色文本 - 暗色模式 */
  }
  
  .footer.footer-auto-dark .footer-link:not(:hover) {
    color: #AEAEB2 !important; /* iOS 文本颜色 - 暗色模式 */
  }
  
  .footer.footer-auto-dark .footer-link:hover {
    color: #0A84FF !important; /* iOS 蓝色 - 暗色模式 */
  }
  
  .footer-link {
    color: #636366; /* iOS 文本颜色 - 浅色模式 */
    transition: color 0.3s ease;
    text-decoration: none;
    margin-left: 15px;
  }
  
  body.dark-theme .footer-link,
  body.auto-theme.dark-mode .footer-link {
    color: #AEAEB2; /* iOS 文本颜色 - 暗色模式 */
  }
  
  .footer-link:hover {
    color: #007AFF; /* iOS 蓝色 - 浅色模式 */
    text-decoration: none;
  }
  
  body.dark-theme .footer-link:hover,
  body.auto-theme.dark-mode .footer-link:hover {
    color: #0A84FF; /* iOS 蓝色 - 暗色模式 */
  }
  
  @media (max-width: 767px) {
    .footer .text-md-right {
      text-align: left !important;
      margin-top: 15px;
    }
    
    .footer-link {
      margin-left: 0;
      margin-right: 15px;
    }
  }
</style>

<script>
  // 自动检测系统颜色方案并应用相应主题
  (function() {
    // 检查浏览器是否支持matchMedia API
    if (!window.matchMedia) {
      console.log('Browser does not support matchMedia API, using fallback for footer theme');
      return; // 如果不支持，则退出并依赖CSS的媒体查询
    }
    
    try {
      // 初始检测
      applyThemeBasedOnSystemPreference();
      
      // 安全地添加事件监听器
      const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
      
      // 检查是否支持addEventListener (较新的浏览器)
      if (darkModeMediaQuery.addEventListener) {
        darkModeMediaQuery.addEventListener('change', applyThemeBasedOnSystemPreference);
      } else if (darkModeMediaQuery.addListener) {
        // 兼容旧版API
        darkModeMediaQuery.addListener(applyThemeBasedOnSystemPreference);
      }
      
      // 当DOM内容改变时重新应用主题（处理动态加载的情况）
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
          // 确保在DOM完全加载后再次应用主题
          setTimeout(applyThemeBasedOnSystemPreference, 100);
        });
      } else {
        // 如果DOM已经加载完成，立即应用
        setTimeout(applyThemeBasedOnSystemPreference, 100);
      }
      
      // 当Window加载完成时确保主题应用正确
      window.addEventListener('load', function() {
        setTimeout(applyThemeBasedOnSystemPreference, 200);
      });
    } catch (error) {
      console.error('Error setting up theme detection for footer:', error);
    }
    
    function applyThemeBasedOnSystemPreference() {
      try {
        // 检查系统是否为暗色模式
        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        
        // 获取footer元素
        const footer = document.querySelector('.footer');
        if (!footer) return;
        
        // 检查页面是否已有明确的主题设置
        const body = document.body;
        if (!body) return; // 安全检查
        
        const hasExplicitTheme = body.classList.contains('dark-theme') || 
                                (body.classList.contains('auto-theme') && body.classList.contains('dark-mode')) ||
                                body.classList.contains('light-theme');
        
        // 只有在没有明确主题设置的情况下才应用系统偏好
        if (!hasExplicitTheme) {
          if (isDarkMode) {
            footer.classList.add('footer-auto-dark');
          } else {
            footer.classList.remove('footer-auto-dark');
          }
        }
        
        // 确保版权文本颜色正确
        const copyrightText = footer.querySelector('.copyright-text');
        if (copyrightText) {
          if (isDarkMode || hasExplicitTheme && (body.classList.contains('dark-theme') || body.classList.contains('dark-mode'))) {
            copyrightText.style.color = '#98989D !important';
            // 使用setAttribute来确保style属性被设置
            copyrightText.setAttribute('style', 'color: #98989D !important');
          } else {
            copyrightText.style.color = '#8E8E93 !important';
            copyrightText.setAttribute('style', 'color: #8E8E93 !important');
          }
        }
        
        // 设置自定义数据属性以便于调试
        footer.dataset.themeSource = hasExplicitTheme ? 'page' : (isDarkMode ? 'system-dark' : 'system-light');
      } catch (error) {
        console.error('Error applying theme to footer:', error);
      }
    }
    
    // 定期检查，以防主题切换或DOM更改
    setInterval(applyThemeBasedOnSystemPreference, 5000);
  })();
</script>
